<template>
  <div>
    <div class="title">
      <div class="desc">
        学术著作
        <el-checkbox v-model="checked" @change="changeChecked"
          >无(专家无学术著作时，勾选该项;可完成专家新增)</el-checkbox
        >
      </div>
      <div class="box-wrap">
        <div class="line-item">
          <el-button type="primary" v-if="!checked" @click="handleAdd" :disabled="flag == 3"
            >添加</el-button
          >
        </div>
      </div>
    </div>

    <el-table :data="membersList" class="table">
      <el-table-column label="出版社名称" width="150">
        <template #default="scope">
          <el-input
            v-if="activeIndex == scope.$index"
            v-model="scope.row.publisherName"
            placeholder="出版社名称"
            maxlength="20"
            show-word-limit
          ></el-input>
          <span v-else>{{ scope.row.publisherName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="著作名称" width="150">
        <template #default="scope">
          <el-input
            v-if="activeIndex == scope.$index"
            v-model="scope.row.papersName"
            placeholder="著作名称"
            maxlength="20"
            show-word-limit
          ></el-input>
          <span v-else>{{ scope.row.papersName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发表时间" width="150">
        <template #default="scope">
          <el-date-picker
            v-if="activeIndex == scope.$index"
            v-model="scope.row.publicationTime"
            type="data"
            value-format="YYYY-MM-DD"
            placeholder="发表时间"
            clearable
            style="width: 100%"
          />
          <span v-else>{{ scope.row.publicationTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="标准书(ISBN)" width="150">
        <template #default="scope">
          <el-input
            v-if="activeIndex == scope.$index"
            v-model="scope.row.issnIsbn"
            placeholder="标准书(ISBN)"
            maxlength="20"
            show-word-limit
          ></el-input>
          <span v-else>{{ scope.row.issnIsbn }}</span>
        </template>
      </el-table-column>

      <el-table-column label="维护单位" width="150">
        <template #default="scope">
          <el-input
            v-if="activeIndex == scope.$index"
            v-model="scope.row.completeUnitName"
            placeholder="维护单位"
          ></el-input>
          <span v-else>{{ scope.row.completeUnitName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否入库" width="150">
        <template #default="scope">
          <el-select v-if="activeIndex == scope.$index" v-model="scope.row.isIncluded" clearable>
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
          <span v-else>{{ scope.row.isIncluded }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否代表作" width="150">
        <template #default="scope">
          <el-select v-if="activeIndex == scope.$index" v-model="scope.row.isMasterWork" clearable>
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="2"></el-option>
          </el-select>
          <span v-else>{{ scope.row.isMasterWork == 1 ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" width="250">
        <template #header>
          <span>操作</span>
        </template>
        <template #default="scope">
          <div v-if="activeIndex == scope.$index">
            <el-button type="success" @click="handleSave(scope.row)">保存</el-button>
            <el-popconfirm
              @confirm="handleDelete(scope.$index)"
              width="220"
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon-color="#e6a23c"
              title="你确定要删除当前行?"
            >
              <template #reference>
                <el-button type="danger" :disabled="flag == 3">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
          <div v-else>
            <el-button type="primary" @click="handleEdit(scope.$index)" :disabled="flag == 3"
              >编辑</el-button
            >
            <el-popconfirm
              @confirm="handleDelete(scope.$index)"
              width="220"
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon-color="#e6a23c"
              title="你确定要删除当前行?"
            >
              <template #reference>
                <el-button type="danger" :disabled="flag == 3">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      center
      class="global-dialog"
      v-model="dialogVisable"
      width="75%"
      top="10vh"
      :show-close="true"
      :close-on-click-modal="false"
    >
      <template #title>
        <div class="my-header">
          <el-tabs class="demo-tabs">
            <el-tab-pane label="选择学术著作">
              <el-col :span="16" align="left" style="margin-bottom: 15px">
                <el-input
                  clearable
                  v-model="search.name"
                  placeholder="著作名称"
                  style="width: 120px; margin-right: 15px"
                >
                </el-input>
                <!-- <el-select clearable v-model="search.maintainUnitId" placeholder="维护单位">
                                    <el-option :label="item.belongingUnit" :value="item.belongingCode"
                                        :key="item.belongingCode" v-for="item in unitNameList" />
                                </el-select> -->
                <el-select clearable v-model="search.workLevelId" placeholder="著作级别">
                  <el-option
                    :label="item.itemText"
                    :value="item.itemValue"
                    :key="item.itemValue"
                    v-for="item in levelList"
                  />
                </el-select>
                <el-select clearable v-model="search.pyear" placeholder="年份">
                  <el-option
                    :label="item.itemText"
                    :value="item.itemValue"
                    :key="item.itemValue"
                    v-for="item in yearList"
                  />
                </el-select>
                <el-button class="ordinary" @click="getTableList">搜索</el-button>
              </el-col>

              <div>
                <el-table
                  :data="tableDate"
                  v-loading="isLoading"
                  style="width: 100%"
                  class="center-table"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="55"> </el-table-column>
                  <ColumnData v-for="column of columns" :key="column.label" :item="column" />
                </el-table>
                <div class="example-pagination-block">
                  <el-pagination
                    :current-page="pagination.page"
                    :page-size="pagination.pageSize"
                    background
                    layout="prev, pager, next ,total,sizes,jumper"
                    :total="pagination.total"
                  />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeVisable">关闭</el-button>
          <el-button type="primary" @click="choose">选择</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import ColumnData from '@/views/science/components/table/column-data.vue'
import { tips } from '@/views/science/components/tips/tips'
import tableData from '@/views/science/payoffs/composition/tableHeader.json'
import moment from 'moment'

import { getTable } from '@/views/science/api/academic'
import { reactive, ref, toRefs, watch } from 'vue'

export default {
  components: {
    ColumnData,
  },
  emits: {
    dataChange: null,
    paramsChange: null,
  },
  props: {
    expertType: {
      type: Number,
      default: 1,
    },
    members: {
      type: Array,
      required: true,
    },
    levelList: {
      type: Array,
      required: true,
    },
    // falg  1:新增  2:编辑  3:详情
    flag: {
      type: String,
      default: '1',
    },
    isChecked: {
      type: Number,
      default: 1,
    },
  },

  setup(props, { emit }) {
    const checked = ref(!props.isChecked)
    let data = reactive({
      unitNameList: [],
      typeList: [],
      workList: [],
      yearList: [
        { itemName: '2026年', itemValue: 2026 },
        { itemName: '2025年', itemValue: 2025 },
        { itemName: '2024年', itemValue: 2024 },
        { itemName: '2023年', itemValue: 2023 },
        { itemName: '2022年', itemValue: 2022 },
        { itemName: '2021年', itemValue: 2021 },
        { itemName: '2020年', itemValue: 2020 },
        { itemName: '2019年', itemValue: 2019 },
        { itemName: '2019年', itemValue: 2018 },
      ],

      tableDate: [],
      temp: [],
      columns: tableData.compositionHeader,
      isLoading: false,
      pagination: { page: 1, pageSize: 10, total: 0 }, //分页
      search: {
        name: '',
        maintainUnitId: '',
        workLevelId: '',
        pyear: '',
      },
    })

    let activeIndex = ref(-1)

    let dialogVisable = ref(false)

    const membersList = ref(props.members) as any

    watch(props, (newValue, oldValue) => {
      membersList.value = newValue.members
      console.log(props.expertType, 'expertType')
    })
    watch(()=>props.isChecked, () => {
      console.log(checked.value,!props.isChecked,'journal-ddasfwef');
      checked.value = !props.isChecked
    },{
      immediate:true
    });
    const closeVisable = () => {
      data.temp = []
      dialogVisable.value = false
    }

    const handleSelectionChange = (arr) => {
      data.temp = arr.map((item) => ({
        id: item.id,
        publisherName: '暂无',
        papersName: item.name,
        issnIsbn: item.isbnBookNo,
        completeUnitName: item.maintainUnit,
        isIncluded: '否',
        isMasterWork: '1',
        publicationTime: item.publicDate,
        type: 2,
      }))
    }

    //  获取学术论文列表/发送请求/获取数据

    const handleAdd = () => {
      if (props.expertType == 2) {
        console.log('props.expertType')
        let item = {
          // id: '',
          publisherName: '',
          papersName: '',
          issnIsbn: '',
          completeUnitName: '',
          isIncluded: '否',
          isMasterWork: '1',
          publicationTime: '',
          type: 2,
        }
        let flag = true
        membersList.value.every(item=>{
          console.log(item,'item');
          for(let key in item){
            if(item[key]===''){
              flag =  false
              return false
            }
          }
          return true
        })
        if(!flag){
          tips("请填写完整数据", "warning");

          return
        }
        membersList.value.push(item)
        activeIndex.value = membersList.value.length - 1
      } else {
        getTableList()
        dialogVisable.value = true
      }
    }

    const getTableList = () => {
      ;(data.isLoading = true),
        getTable({
          current: data.pagination.page,
          size: data.pagination.pageSize,
          ...data.search,
        }).then((res) => {
          let resData = res.data.data.records

          // resData.map((item) => {
          //     item.publicDate = moment(item.publicDate).format("YYYY-MM-DD");
          // });
          resData.map((item) => {
            if (item.publicDate == null) {
              item.publicDate == ''
            } else {
              item.publicDate = moment(item.publicDate).format('YYYY-MM-DD')
            }
          })

          data.tableDate = res.data.data.records
          data.pagination.total = res.data.data.total
          data.isLoading = false
        })
    }

    const choose = () => {
      if (data.temp.length == 0) {
        tips('请至少选择一个', 'warning')
        return false
      }
      data.temp.forEach((item: Record<string, any>) => {
        if (membersList.value.every((t) => t.id !== item.id)) membersList.value.push(item)
      })
      activeIndex.value = -1
      emit('paramsChange', { list: membersList.value, checked: checked.value })
      dialogVisable.value = false
    }

    const handleEdit = (index: number) => {
      activeIndex.value = index
    }

    const handleSave = (row) => {
      console.log(row,'asdasdas');
      for(let key in row){
        if(row[key]===''){
          console.log(row[key],key,'asdasd');
          
          tips("请填写完整数据", "warning");
          return
        }
      }
      activeIndex.value = -1

      emit('paramsChange', { list: membersList.value, checked: checked.value })
    }

    const handleDelete = (index: number) => {
      membersList.value.splice(index, 1)

      emit('paramsChange', { list: membersList.value, checked: checked.value })
    }
    const changeChecked = () => {
      emit('paramsChange', { list: membersList.value, checked: checked.value })
    }
    return {
      changeChecked,
      membersList,
      activeIndex,
      dialogVisable,
      checked,
      choose,
      handleAdd,
      closeVisable,
      handleEdit,
      handleSave,
      handleDelete,
      handleSelectionChange,
      ...toRefs(data),
      getTableList,
    }
  },
}
</script>

<style scoped lang="scss">
.box-wrap {
  display: flex;
  // .line-item:nth-child(1) {
  //     margin-right: 417px;
  //     font-size: 14px;
  //     align-items: center;
  //     display: flex;
  //     align-items: center;
  // }
}
.title {
  display: flex;
  justify-content: space-between;

  .desc {
    font-weight: bolder;
  }
}

.title-line {
  color: #409eff;
}

.dialog-footer {
  display: flex;
  justify-content: end;
}

:deep(.el-dialog__body) {
  display: none;
}

// 滚动条
:deep(.demo-tabs > .el-tabs__content) {
  max-height: 500px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.table {
  margin: 15px 0;
}
</style>
